---
title: gluestack-ui Image Component | Installation, Usage, and API

description: Enhance your app or website with captivating visuals using our Image feature.

pageTitle: Image

pageDescription: Enhance your app or website with captivating visuals using our Image feature.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-nativewind/Components/Media And Icons/Image" />

import { Image } from '../../core-components/nativewind';
import { transformedCode } from '../../utils';
import Wrapper from '../../core-components/nativewind/Wrapper';

import {
  AppProvider,
  CodePreview,
  Text,
  Table,
  TableContainer,
  InlineCode,
  Tabs
} from '@gluestack/design-system';
import { CollapsibleCode } from '@gluestack/design-system';

This is an illustration of **Image** component.

<Wrapper>
  <CodePreview
    _rendererWrapper={{
      py: '$8',
      px: '$8',
    }}
    showComponentRenderer={true}
    showArgsController={true}
    metaData={{
      code: `
       <Image
       {...props}
         source={{
            uri: 'https://images.unsplash.com/photo-1472214103451-9374bd1c798e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
          }}
          alt="image"
      />
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Image,
      },
      argsType: {
        size: {
          control: 'select',
          options: ['2xs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'],
          default: 'md',
        },
      },
    }}
  />
</Wrapper>

<br />

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add image
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/image
```

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/nativewind/image/index.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { Image } from '@/components/ui/image';
```

```jsx
export default () => <Image source={source} />;
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Image

It inherits all the properties of React Native's [Image](https://reactnative.dev/docs/image) component.

### Props

Image component is created using Image component from react-native. It extends all the props supported by [React Native Image](https://reactnative.dev/docs/image#props).

<!--
## Spec Doc

Explore the comprehensive details of the Image in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.

<iframe
  style={{
    borderRadius: '8px',
    border: ' 1px solid rgba(0, 0, 0, 0.1)',
    aspectRatio: 736 / 585,
  }}
  src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D6429-37300%26t%3Dh37ERUrDzeh1Zy7x-1%26scaling%3Dscale-down%26page-id%3D6429%253A35399%26starting-point-node-id%3D6429%253A37300%26mode%3Ddesign"
  allowFullScreen
/> -->
